<template>
	<view class="releaseRequirements">
		<f-navbar title="发布需求（维保）" :iconLeft="true" :isBack="true" @goBack="goBack" />
		<view class="releaseRequirements">
			<view
				class="releaseRequirements-content-one ff-bg-fff ff-font-15 ff-color-222 ff-margin-12 ff-border-radius-10">
				<view class="ff-font-weight-600 ff-font-17 ff-margin-bottom-5">基本信息</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">维保建筑物</view>
					<view class="releaseRequirements-content-one-choice ff-flex ff-text-right"
						@click="choiceBulidClick">
						<view v-if="!buildName" class="ff-color-999">请选择维保建筑物</view>
						<view v-else>{{ buildName }}</view>
						<u-icon color="#2a3c62" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">项目名称</view>
					<input class="ff-text-right ff-line-height-1-3" placeholder="请输入项目名称" placeholder-style="color:#999"
						type="text" v-model.trim="demandInfoList.projectName" />
				</view>
				<view>
					<view class="ff-flex-between ff-border-bottom">
						<view class="releaseRequirements-content-one-title">开始日期</view>
						<view class="releaseRequirements-content-one-choice ff-flex ff-text-right"
							@click="demandStartTimeClick">
							<view class="ff-color-999" v-if="demandInfoList.maintenanceStartTime == ''">请选择开始日期</view>
							<view v-else>{{ demandInfoList.maintenanceStartTime }}</view>
							<u-icon color="#2a3c62" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 时间弹框 -->
					<u-picker mode="time" v-model="demandStartTimeType" :default-time="defaultStartTime"
						@confirm="demandStartTimeConfirm"></u-picker>
				</view>
				<view>
					<view class="ff-flex-between ff-border-bottom">
						<view class="releaseRequirements-content-one-title">结束日期</view>
						<view class="releaseRequirements-content-one-choice ff-flex ff-text-right"
							@click="demandEndTimeClick">
							<view class="ff-color-999" v-if="demandInfoList.maintenanceEndTime == ''">请选择结束日期</view>
							<view v-else>{{ demandInfoList.maintenanceEndTime }}</view>
							<u-icon color="#2a3c62" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 时间弹框 -->
					<u-picker mode="time" v-model="demandEndTimeType" @confirm="demandEndTimeConfirm"></u-picker>
				</view>
				<view class="ff-flex-between ff-border-bottom engineerBox">
					<view class="releaseRequirements-content-one-title ff-padding-top-5">消防工程师人数限制</view>
					<view class="engineerRadio ff-flex">
						<u-radio-group v-model="engineerVal" @change="radioEngineerChange" wrap="true">
							<u-radio :name="0">不限制</u-radio>
							<u-radio :name="1">限制</u-radio>
						</u-radio-group>
						<view class="ff-align-items-one engineerNum" v-if="demandInfoList.projectFilter[0].checked">
							<input placeholder="请输入" placeholder-style="color:#999"
								v-model.trim="demandInfoList.projectFilter[0].filterValue"
								class="ff-text-right ff-padding-right-5" type="number" />
							<view>人</view>
						</view>
					</view>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">项目预算</view>
					<view class="ff-align-items-one">
						<input class="ff-text-right ff-padding-right-5" placeholder="请输入项目预算"
							placeholder-style="color:#999" type="digit" v-model.trim="demandInfoList.projectBudget"
							@input="projectBudgetBlur" />
						<view>元</view>
					</view>
				</view>
			</view>
			<view class="releaseRequirements-content-two ff-bg-fff ff-font-15 ff-margin-12 ff-border-radius-10">
				<view class="ff-font-weight-600 ff-font-17 ff-margin-bottom-5">联系人信息</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">联系人</view>
					<input class="ff-text-right ff-line-height-1-3" placeholder="请输入联系人" placeholder-style="color:#999"
						type="text" v-model.trim="demandInfoList.projectLink" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">联系电话</view>
					<input class="ff-text-right ff-line-height-1-3" placeholder="请输入联系电话" placeholder-style="color:#999"
						type="number" maxlength="11" v-model.trim="demandInfoList.projectPhone" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="releaseRequirements-content-one-title">联系电话是否公开</view>
					<u-radio-group v-model="demandInfoList.showPhone">
						<u-radio :name="0">不公开</u-radio>
						<u-radio :name="1">公开</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="releaseRequirements-content-but">
				<view class="releaseRequirements-content-but-box"><u-button type="primary" shape="circle"
						@click="demandSubmit">提交</u-button></view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="infoModal" :show-cancel-button="true" @confirm="confirmInfo" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="退出后, 您填写的内容将不会被保存" />
		<u-modal v-model="statementModal" :content="statementContent" @confirm="statementConfirm" confirm-text="确认发布"
			cancel-text="取消发布" :show-cancel-button="true" title="免责声明" :content-style="{ 'line-height': '1.5' }" />
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		name: 'releaseRequirements',
		data() {
			return {
				statementModal: false, // 发布弹框显/藏
				statementContent: '', // 发布弹框的内容
				infoModal: false, // 返回提示弹框的显/隐
				defaultStartTime: '', // 默认开始时间
				maintenancePeriodList: [], // 维保期限列表数据
				maintenancePeriodType: false, // 维保期限弹框显/隐
				macroMaintenancePeriodName: '', // 被选中的维保期限
				engineerVal: 0, // 消防工程师是否限制
				// 需求推荐的参数
				demandInfoList: {
					projectName: '', // 项目名称
					macroRequirementId: '', // 需求类别
					maintenanceStartTime: '', // 开始日期
					maintenanceEndTime: '', // 结束日期
					projectLink: '', // 项目联系人
					projectPhone: '', // 项目联系电话
					showPhone: 0, // 是否公开联系电话(0:不公开 1:公开 ，默认1)
					projectBudget: '', // 项目预算(元)
					// 展示过滤条件(消防工程师数量)
					projectFilter: [{
						checked: false,
						filterCode: 'FIRE_ENGINEER_NUM', // 过滤条件编码：FIRE_ENGINEER_NUM - 注册消防工程师数量
						filterValue: '' // 过滤条件值
					}],
					// 建筑物集合
					buildings: [{
						buildingId: 0,
						facilitiesTypeIds: []
					}],
					isDisassembly: '' // 是否拆单:1.否 2.是
				},
				buildName: '', // 建筑物名称
				demandStartTimeType: false, // 开始时间的显/隐
				demandEndTimeType: false // 结束时间的显/隐
			};
		},
		onLoad(e) {
			// console.log('从前边页面获取的参数数据--------', e);
			if (Object.keys(e).length > 0) {
				let buildList = JSON.parse(e.buildList);
				this.buildName = buildList.buildParams.buildingName;
				this.demandInfoList.isDisassembly = buildList.isDisassembly;
				this.demandInfoList.buildings[0].buildingId = buildList.buildParams.buildingId;
				this.demandInfoList.buildings[0].facilitiesTypeIds = buildList.buildDetailsList;
			}
			this.getDemandCategory(); // 获取需求类别列表数据
			this.getMaintenancePeriod(); // 获取维保期限列表数据
			this.demandInfoListLenghth = JSON.stringify(this.demandInfoList).length; // 初始的数据长度
		},
		onReady() {
			// 给开始日期的默认日期赋值
			this.defaultStartTime = new Date().toISOString().slice(0, 10) // 定位当前日期
			this.demandInfoList.maintenanceStartTime = this.defaultStartTime
		},
		methods: {
			...mapMutations(['setBuildingIdStatus']),
			// 返回上一层页面
			goBack() {
				if (JSON.stringify(this.demandInfoList).length >= this.demandInfoListLenghth) {
					this.infoModal = true;
				} else {
					this.setBuildingIdStatus(''); // 清空单位建筑物的id
					this.$pageJump.reLaunch('/pages/maintenance/company/Company');
				}
			},
			// 返回上一层确认按钮
			confirmInfo() {
				this.setBuildingIdStatus(''); // 清空单位建筑物的id
				this.$pageJump.reLaunch('/pages/maintenance/company/Company');
			},
			// 获取需求类别列表数据
			async getDemandCategory() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/sys/macro/catalog/xiaofang_xuqiuleibie'
				});
				// console.log('获取需求类别列表数据------------', data)
				if (data.code == 200) {
					this.demandInfoList.macroRequirementId = data.data[0].id; // 给需求类别赋值
				} else {
					that.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 获取维保期限列表数据
			async getMaintenancePeriod() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/sys/macro/catalog/xiaofang_weibaoqixian'
				});
				// console.log('获取维保期限列表数据------------', data);
				if (data.code == 200) {
					this.maintenancePeriodList = data.data; // 给需求类别赋值
				} else {
					that.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击选择建筑物
			choiceBulidClick() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/company/home/components/releaseRequirements/releaseRequirementsBuild');
			},
			// ----------------打开：开始时间弹框-----------
			// 点击打开选择时间的弹框
			demandStartTimeClick() {
				this.demandStartTimeType = true;
			},
			// 选择时间确认后返回的数据
			demandStartTimeConfirm(e) {
				// console.log('选择确定的时间-------', e);
				this.demandInfoList.maintenanceStartTime = e.year + '-' + e.month + '-' + e.day;
			},
			// ----------------打开：结束时间弹框-----------
			// 点击打开选择时间的弹框
			demandEndTimeClick() {
				this.demandEndTimeType = true;
			},
			// 选择：结束时间确认后返回的数据
			demandEndTimeConfirm(e) {
				// console.log('选择确定的时间-------', e);
				this.demandInfoList.maintenanceEndTime = e.year + '-' + e.month + '-' + e.day;
			},
			// 消防工程师单选框选择
			radioEngineerChange(e) {
				if (e == 0) {
					this.demandInfoList.projectFilter[0].checked = false;
					this.demandInfoList.projectFilter[0].filterValue = '';
					return;
				}
				if (e == 1) {
					this.demandInfoList.projectFilter[0].checked = true;
					return;
				}
			},
			// 项目预算至多只能输入小数点后俩位
			projectBudgetBlur() {
				this.$nextTick(() => {
					this.demandInfoList.projectBudget = (this.demandInfoList.projectBudget.match(
							/^\d*(\.?\d{0,2})/g)[0]) ||
						null // 保留小数点后俩位
				})
			},
			// -------------------------点击提交-----------------------------
			// 比较俩个日期的大小
			compareDate(dateTime1, dateTime2) {
				const formatDate1 = new Date(dateTime1)
				const formatDate2 = new Date(dateTime2)
				if (formatDate1 > formatDate2) {
					this.$refs.uToast.show({
						title: '开始日期不得大于结束日期',
						type: 'error'
					});
					return
				}
			},
			demandSubmit() {
				if (this.buildName == '') {
					this.$refs.uToast.show({
						title: '请选择维保建筑物',
						type: 'error'
					});
					return;
				}
				if (this.demandInfoList.projectName == '') {
					this.$refs.uToast.show({
						title: '请输入项目名称',
						type: 'error'
					});
					return;
				}
				if (this.$check.hasSpecialChar(this.demandInfoList.projectName)) {
					uni.showModal({
						title: '温馨提示',
						content: '建筑物名称不允许含有特殊字符&、@、*、？等，请修改后再试。',
						confirmColor: '#3178FF',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					})
					return
				}
				if (this.demandInfoList.maintenanceStartTime == '') {
					this.$refs.uToast.show({
						title: '请选择开始日期',
						type: 'error'
					});
					return;
				}
				if (this.demandInfoList.maintenanceEndTime == '') {
					this.$refs.uToast.show({
						title: '请选择结束日期',
						type: 'error'
					});
					return;
				}
				// 比较开始日期与结束日期的大小
				if (new Date(this.demandInfoList.maintenanceStartTime) > new Date(this.demandInfoList
						.maintenanceEndTime)) {
					this.$refs.uToast.show({
						title: '开始日期不得大于结束日期',
						type: 'error'
					});
					return
				}
				// 结束日期只能是今天或者今天以后得日期
				const date1 = new Date() // 定位当前日期
				if (new Date(this.demandInfoList.maintenanceEndTime) < date1) {
					this.$refs.uToast.show({
						title: '结束日期必须晚于今天',
						type: 'error'
					});
					return
				}
				if (this.engineerVal == 1 && this.demandInfoList.projectFilter[0].filterValue == '') {
					this.$refs.uToast.show({
						title: '请输入消防工程师人数限制',
						type: 'error'
					});
					return;
				}
				if (this.demandInfoList.projectBudget == '') {
					this.$refs.uToast.show({
						title: '请输入项目预算',
						type: 'error'
					});
					return;
				}
				if (this.demandInfoList.projectLink == '') {
					this.$refs.uToast.show({
						title: '请输入联系人',
						type: 'error'
					});
					return;
				}
				if (!this.$check.isMobile(this.demandInfoList.projectPhone)) {
					this.$refs.uToast.show({
						title: '请输入正确的联系人电话',
						type: 'error'
					});
					return;
				}
				this.statementModal = true; // 发布弹框显/藏
				this.statementContent = `(1)请您确保发布的维保信息真实有效。(2)若发布维保信息导致的法律纠纷问题，均与本平台无关。(3)请严格按照消防安全规范发布维保信息。`; // 发布弹框的内容
			},
			// 发布弹框点击确认发布的操作
			statementConfirm() {
				this.$refs.loading.openLoading('提交中···'); // 打开loading动画
				this.$http
					.post({
						url: '/project/add/v3',
						data: this.demandInfoList
					})
					.then(res => {
						// console.log('发布需求返回的数据----------', res);
						this.$refs.loading.closeLoading(); // 关闭loading动画
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success'
							});
							this.setBuildingIdStatus(''); // 清空单位建筑物的id
							this.$pageJump.reLaunch('/pages/maintenance/company/Company');
						} else {
							uni.showModal({
								title: '无法发布',
								content: res.msg,
								confirmColor: '#3178FF',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {}
								},
							})
						}
					});
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.releaseRequirements {
		&-content {
			margin-top: 190rpx;

			&-one {
				padding: 40rpx 26rpx 29rpx 26rpx;

				.ff-font-weight-600 {
					color: #0b204b;
				}

				.ff-border-bottom {
					padding: 40rpx 0;
					align-items: center;

					input {
						height: 28rpx;
						line-height: 1;
					}
				}

				&-title {
					width: 290rpx;
				}

				.engineerBox {
					align-items: flex-start;

					.engineerRadio {
						width: 269rpx;
						position: relative;

						.engineerNum {
							position: absolute;
							right: 0;
							bottom: 4rpx;

							input {
								width: 100rpx;
							}
						}
					}
				}
			}

			&-two {
				padding: 40rpx 30rpx 32rpx;

				.ff-border-bottom {
					padding: 40rpx 0;
					align-items: center;

					input {
						height: 28rpx;
						line-height: 1;
					}
				}

				&-title {
					color: #2a3c62;
				}
			}

			&-but {
				padding: 40rpx 0 80rpx;
				margin: 0 6%;
				width: 88%;
				text-align: center;

				/deep/.u-size-default {
					height: 90rpx !important;
					line-height: 90rpx !important;
				}
			}
		}
	}
</style>